<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple aclist">
          活动列表
          <hr />
          <div class="inputnav">
            <div>
              活动名称 <input type="text" placeholder="请输入" v-model="mc" />
            </div>
            <div>
              活动类型 <input type="text" placeholder="请输入" v-model="lx" />
            </div>
            <div>
              活动状态 <input type="text" placeholder="请输入" v-model="zt" />
            </div>
            <div>
              时间范围 <input type="text" placeholder="请输入" v-model="fw" />
            </div>
          </div>
          <div class="btn">
            <button style="background: #446ce3" @click="getzixunxx">
              查询
            </button>
            <button style="background: #61b65c">添加</button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24"
        ><div class="grid-content bg-purple myshouye">
          <div>我的首页</div>
          <el-table :data="tableData" style="width: 100%" height="515px">
            <el-table-column prop="name" label="活动名称" />
            <el-table-column prop="type" label="活动类型" />
            <el-table-column prop="pic" label="图片">
              <img src="../../../assets/img/海贼.png" alt="" />
            </el-table-column>
            <el-table-column prop="actime" label="活动开始时间" />
            <el-table-column prop="ovtime" label="活动结束时间" />
            <el-table-column prop="acsatus" label="活动状态" />
            <el-table-column prop="acclick" label="活动点击量" />
            <el-table-column prop="shuliang" label="活动人数" />
            <el-table-column prop="operation" label="操作" />
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="numall"
            v-model="currentPage"
            @currentChange="fn"
            :pageSize="pageSize"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mockapi } from "../../../api/zixun/mock";
export default {
  data() {
    return {
      tableData: "",
      currentPage: 1,
      pageSize: 4,
      numall: "",
      mc: "",
      lx: "",
      zt: "",
      fw: "",
    };
  },
  created() {
    this.getzixunapi();
  },
  methods: {
    fn(a) {
      this.currentPage = a;
      this.getzixunapi();
    },
    async getzixunapi() {
      const res = await mockapi.getzixun();
      this.numall = res.result.data.length;
      const res1 = await mockapi.getzixun1(this.currentPage, this.pageSize);
      this.tableData = res1.result;
    },
    async getzixunxx() {
      const res = await mockapi.chazhaozixun({
        mc: this.mc,
        lx: this.lx,
        zt: this.zt,
      });
      this.tableData = res.result;
    },
  },
};
</script>

<style lang="less">
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.bg-purple {
  background: #fff;
}

.aclist {
  margin-top: 30px;
  height: 130px;
  padding: 10px;
  position: relative;
}
.inputnav {
  display: flex;
  width: 900px;
  justify-content: space-between;
  line-height: 100px;
  input {
    height: 30px;
    background: #e9e9e9;
    border: none;
  }
}
.btn {
  position: absolute;
  margin-top: -65px;
  margin-left: 1000px;
  width: 200px;
  height: 30px;
  button {
    width: 50px;
    height: 30px;
    margin-left: 20px;
    color: white;
  }
}
.myshouye {
  position: relative;
  height: 600px;
  div {
    padding: 10px;
  }
  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
</style>
